<template>
	<view class="page">
		<view class="page-header">
			<view class="page-header-content">
				<view class="page-header-title">筛选</view>
			</view>
		</view>
		<view class="page-body form">
			<view class="form-group">
				<view class="form-item">
					<view class="form-item-header">案卷类型：</view>
					<view class="form-item-body">
						<view class="select">
							<picker :range="list" range-key="label" :value="typeIndex" @change="bindTypeChange">
								<view class="selected">
									{{ messageType | getSelectedName(list, 'value') || '请选择'}}
								</view>
								<view class="select-icon">
									<uni-icons type="arrowdown" size="22" color="#c4c4c4" />
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="page-footer btns fix-bottom">
			<view class="btns-group">
				<view class="btns-item">
					<button class="btn btn-a" @tap="bindReset">重置</button>
				</view>
				<view class="btns-item" @tap="bindSubmit">
					<button class="btn btn-b">查找</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { querySzbmJsdBusinessMiddle, querySzbmJsdBusiness, queryMiddleJsdList } from '@/api/configure.js';
	import { deepClone, mergeUrls, getUserInfo, formatDateStr } from '@/util/util.js';
	import { pathToBase64, base64ToPath } from '@/util/mmmm-image-tools/index.js';
	import configUrl from '@/util/url.js';

	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				list: [{
					value: 4,
					label: '案件流转案件分派'
				}, {
					value: 3,
					label: '案件流转签到消息'
				}, {
					value: 6,
					label: '案件流转考核任务'
				}, {
					value: 7,
					label: '预警消息'
				}, {
					value: 8,
					label: '派遣信息'
				}, {
					value: 9,
					label: '雨水信息'
				}, {
					value: 10,
					label: '重点巡查任务'
				}, {
					value: 11,
					label: '防汛消息'
				}, {
					value: 12,
					label: '天气消息'
				}],
				messageType: '',
				typeIndex: null
			}
		},
		methods: {
			bindReset() {
				this.messageType = '';
				this.typeIndex = null;
			},
			bindSubmit() {
				let data = {
					messageType: this.messageType
				}

				this.$emit('sendCondition', data);
			},
			bindTypeChange(e) {
				this.typeIndex = e.detail.value;
				this.messageType = this.list[this.typeIndex]['value'];
			},
			getData() {
				Object.keys(this.data).forEach((key) => {
					this.$data[key] = this.data[key];
				})
			},
			init() {
				this.getData();
			}
		},
		filters: {
			getSelectedName(value, arr, key) {
				let ret = '';
				let item = {};

				if (value) {
					item = arr.find(item => item[key] == value);

					ret = item ? item['label'] : ''
				}

				return ret;
			}
		},
		created() {
			this.init();
		},
		mounted() {}
	}
</script>

<style lang="scss">
	.page {
		.page-header {
			padding-top: var(--status-bar-height);
			height: 44px;
			background-color: #f29004;
		}

		.page-header-content {
			position: absolute;
			top: var(--status-bar-height);
			left: 0px;
			right: 0px;
			height: 44px;
			background-color: #f29004;

			.page-header-title {
				padding: 13px;
				font-size: 16px;
				line-height: 120%;
				color: #fff;
				text-align: center;
				font-weight: bold;
			}
		}
	}

	.form {
		.form-group {
			.form-item {
				.form-item-header {
					padding: 12rpx 20rpx 12rpx;
					font-size: 24rpx;
					line-height: 120%;
					color: #5d5d5d;
				}

				.form-item-body {
					padding: 0rpx 20rpx;

					.form-control {
						padding: 16rpx 16rpx;
						font-size: 24rpx;
						line-height: 120%;
						color: #5d5d5d;
						border: 1rpx solid #f29004;
						border-radius: 10rpx;
					}
				}
			}
		}
	}

	.cals {
		.cals-group {
			display: flex;
			justify-content: space-between;
			position: relative;
			top: 0rpx;
			left: 0rpx;

			&:after {
				margin-left: -10rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 20rpx;
				height: 1rpx;
				content: '';
				background-color: #c4c4c4;
			}

			.picker {
				width: 100%;
				padding: 16rpx 30rpx 16rpx 10rpx;
				box-sizing: border-box;
			}

			.cals-item {
				width: 180rpx;
				border: 1rpx solid #c4c4c4;
				border-radius: 10rpx;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				box-sizing: border-box;

				.cals-item-content {
					height: 28rpx;
					font-size: 24rpx;
					line-height: 120%;
					color: #5d5d5d;
					text-align: center;
				}

				.icon {
					margin-top: -15rpx;
					margin-left: 58rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					width: 26rpx;
					height: 26rpx;
				}
			}
		}

	}

	.btns {
		background-color: #ffffff;

		.btns-group {
			padding: 17rpx 0rpx;
			display: flex;

			.btns-item {
				width: 50%;
			}
		}
	}

	.btn {
		padding: 16rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 0rpx;
		background: none;

		&:after {
			display: none;
		}

		&.btn-a {
			background-color: #ffebe1;
			color: #f29004;
		}

		&.btn-b {
			background-color: #f29004;
		}
	}

	.fix-bottom {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
	}

	.select {
		border: 1rpx solid #c4c4c4;
		border-radius: 10rpx;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.selected {
			padding: 16rpx 68rpx 16rpx 16rpx;
			min-height: 36rpx;
			font-size: 24rpx;
			line-height: 120%;
			color: #5d5d5d;
		}

		.select-icon {
			width: 68rpx;
			height: 68rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
